import React from 'react'
import {InputText} from "primereact/inputtext"
import {Button} from "primereact/button"
import {DataTable} from 'primereact/datatable'
import {Column} from 'primereact/column'

import {Link} from 'react-router-dom'

class MarketData extends React.Component{
  constructor(){
    super()

    this.state={
      assets:[
        {
          deal: '1', 
          newestPrice: '2', 
          trend:'3', 
          highestPrice:'4',
          lowestPrice:'5',
          trading:'6',
          action:'7'
        },
        {
          deal: '1', 
          newestPrice: '2', 
          trend:'3', 
          highestPrice:'4',
          lowestPrice:'5',
          trading:'6',
          action:'7'
        },
        {
          deal: '1', 
          newestPrice: '2', 
          trend:'3', 
          highestPrice:'4',
          lowestPrice:'5',
          trading:'6',
          action:'7'
        },
        {
          deal: '1', 
          newestPrice: '2', 
          trend:'3', 
          highestPrice:'4',
          lowestPrice:'5',
          trading:'6',
          action:'7'
        },
        {
          deal: '1', 
          newestPrice: '2', 
          trend:'3', 
          highestPrice:'4',
          lowestPrice:'5',
          trading:'6',
          action:<Link to={`market/token/detail`}>777</Link>
        },
      ]
    }
  }

  render(){
    return (
      <DataTable value={this.state.assets}>
        <Column field="deal" header="交易对" />
        <Column field="newestPrice" header="最新价" />
        <Column field="trend" header="24h涨跌幅" />
        <Column field="highestPrice" header="24h最高价" />
        <Column field="lowestPrice" header="24h最低价" />
        <Column field="trading" header="24h成交量" />
        <Column field="action" header="操作" />
      </DataTable>
    )
  }
}

class Market extends React.Component{
  constructor(){
    super()

  }

  render(){
    return (
      <div className="p-g">
        <div className="p-g-2">EOS交易区</div>
        <div className="p-g-2">
          <Link to={`/market/ram`}>RAW行情</Link>
        </div>
        <div className="p-g-2"></div>
        <div className="p-g-3"></div>
        <div className="p-g-3 p-fluid p-inputgroup">
            <InputText placeholder="Keyword"/>
            <Button icon="pi pi-search" className="p-button-primary"/>
        </div>

        <div className="p-g-12">
          <MarketData />
        </div>
      </div>
    )
  }
}

export default Market